@extends('layouts.back_stage')
@section('style')
    @parent
    <style>
        .flow_head_box{
            width:100%;
            height:50px;
            border-bottom: 1px solid #cccccc;
        }
        .model_input{
            width:200px;
            float:left;
            margin-top:20px;
            height:30px;
        }
        .check_btn{
            /*background-color:skyblue;*/
            color:white;
            height:30px;
            margin-top:20px;
            margin-left:20px;
        }
        .btn:hover,.btn:focus{
            color:white;
        }
        .cost_show input{
            background-color:white;
        }
    </style>
@endsection
@section('content')
    <div class="container">
        <div style="padding:20px 0;"><h3>成本类型</h3></div>
        <input type="text" name="name" class="form-control model_input" placeholder="添加新的成本类型" autocomplete="false" />
        <input type="submit" class="btn  check_btn btn-info" placeholder="提交" />
        <h2>已添加的成本类型</h2>
        <table  border="0" cellspacing="0"   class="cost_show" style="width:50%;display: block;">
            <thead>
            <tr>
                <th class="col-md-2">分类ID</th>
                <th class="col-md-5">分类名称</th>
                <th class="col-md-5">操作</th>
            </tr>
            </thead>
            <tbody>
            @if(isset($costing_type) && count($costing_type)>0)
            @foreach($costing_type as $k=>$v)
                <tr>
                    <td class="col-md-2"><input type="text" class="type_id" value="{{ $v->id }}" readonly="readonly" /></td>
                    <td class="col-md-5"><input type="text" class="type_name" value="{{ $v->name }}"  readonly="readonly"  /></td>
                    <td class="col-md-5"><button class="btn update" style="margin-right:5px">修改</button><button class="btn delete">删除</button></td>
                </tr>
            @endforeach
            @endif
            </tbody>
        </table>
    </div>
    <script>
        $(".check_btn").click(function () {
            var that = this;
            var name = $(".model_input").val();
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                data:{
                    name:name
                },
                type:"post",
                url:"/admin/costing_type/create",
                dataType:'json',
                success:function(res){
                    window.location.reload();
                }
            })
        });
        $(".update").click(function(){
            var that = this;
            if($(this).text() == "修改"){
                $(this).parent().siblings().children(".type_name").removeAttr("readonly");
                $(this).text("保存");
                return false;
            }
            if($(this).text() == "保存"){
                var id = $(this).parent().siblings().children(".type_id").val();
                var name = $(this).parent().siblings().children(".type_name").val();
                if(name == ""){
                    alert("请输入分类名称！");
                    return false;
                }
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    data:{
                        id:id,
                        name:name
                    },
                    type:"post",
                    url:"/admin/costing_type/update",
                    dataType:'json',
                    success:function(res){
                       $(that).text("修改");
                       $(that).parent().siblings().children(".type_name").attr("readonly","readonly");
                    }
                })
            }
        });
        $(".delete").click(function () {
            var id = $(this).parent().siblings().children(".type_id").val();
            var name = $(this).parent().siblings().children(".type_name").val();
            var that = this;
            if(confirm("确认要删除吗？")){
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    data:{
                        id:id,
                        name:name
                    },
                    type:"post",
                    url:"/admin/costing_type/delete",
                    dataType:'json',
                    success:function(res){
                        $(that).parent().parent().remove();
                    }
                })
            }
        })
    </script>
@endsection